<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <title>Document</title>
    <!-- 1.引入相关的库文件 -->
    <!-- 引入vue库文件 -->
    <script src='./lib/vue.js'></script>
    <!-- 引入vue-router库文件，用于为window对象全局挂载vuerouter构造函数 -->
    <script src="./lib/vue-router_3.0.2.js"></script>
</head>

<body>
    <!-- 被vm实例所控制的区域 -->
    <div id='app'>
        <!-- 2.添加路由链接 -->
        <router-link to="/user/add">添加用户</router-link>
        <router-link to="/user/edit">修改用户</router-link>
        <router-link to="/user/delete">删除用户</router-link>
        <router-link to="/login">用户登录页面</router-link>
        <!-- 3.路由占位符 -->
        <router-view></router-view>
    </div>
    <script>
        // 4.定义路由组件
        const User = {
            props:["name","password"],
            template: "<h1>用户管理页面---{{$route.params.id}}---账号:{{uname}}---密码：{{password}}</h1>"
        }
        const Login = {
            template: `
                <div>
                    <h1>用户登录页面</h1>
                    <hr/>
                    <!--添加子路由链接 -->
                    <router-link to="/login/name">用户管理页面</router-link>
                    <router-link to="/login/password">用户登录页面</router-link>
                    <!--子路由占位符-->
                    <router-view></router-view>
                </div>
            `
        }
        const Tab1 = {
            template: "<h1>用户账号</h1>"
        }
        const Tab2 = {
            template: "<h3>用户密码</h3>"
        }

        // 创建路由实例
        var router = new VueRouter({
            // routers是路由规则数组
            routes: [
                { path: "/", redirect: "/user" },
                { path: "/user/:id", component: User, props:{
                    name:"赵四",
                    password:'1234'
                } },
                { path: "/login", component: Login,children:[
                    {path: "/login/name", component: Tab1},
                    {path: "/login/password", component: Tab2}
                ] },
            ]
        })

        // 创建vm实例对象
        var vm = new Vue({
            // 指定控制的区域
            el: '#app',
            data: {

            },
            // 挂载路由实例对象
            router: router,
            methods: {

            }
        });



    </script>
</body>

</html>